<template>
	<div style="height:100%;width:100%;" ref="MapView">
		<div class="control">
			显示隐藏： <i-switch v-model="show"></i-switch>
			<br>------------------------------------<br>
			雪大小({{snowSize}}):<Slider v-model="snowSize" :step="0.001" :min="0" :max="0.03"></Slider>
			<br>------------------------------------<br>
			雪速({{snowSpeed}}):<Slider v-model="snowSpeed" :min="0" :max="1000"></Slider>
		</div>
	</div>
</template>
<script>
	import simpleMap from '@best/libs-cli/simpleMap/index.js'
	var map = null;
	var SnowEffect = null;

	export default {
		data() {
			return {
				show: false,
				snowSize: 0.02,
				snowSpeed: 60,
			}
		},
		watch: {
			snowSize(val) {
				if (SnowEffect) {
					SnowEffect.snowSize = val
				}
			},
			snowSpeed(val) {
				if (SnowEffect) {
					SnowEffect.snowSpeed = val
				}
			},
			rainSize(val) {
				if (SnowEffect) {
					SnowEffect.rainSize = val
				}
			},
			show(val) {
				if (val) {
					SnowEffect = new Cesium.SnowEffect(map, {
						snowSize: this.snowSize, //雪大小 ，默认可不写
						snowSpeed: this.snowSpeed //雪速，默认可不写
					});
				} else if (SnowEffect) {
					SnowEffect.destroy();
					SnowEffect = null;
				}
			}
		},
		mounted() {
			map = simpleMap.initMap(this.$refs.MapView);
			map.addProviders([{
				"type": "TD",
				"url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
			}]);




		},
		beforeDestroy() {
			// 页面被注销时，销毁地图
			map && map.destroy();
			SnowEffect && SnowEffect.destroy();
			SnowEffect = null;
		}
	}
</script>
<style scoped>
.MapView {
	width: 100%;
	height: 100%;
}

.layout {
	height: 100%;
	width: 100%;
}

.control {
	position: absolute;
	top: 20px;
	left: 20px;
	background: rgba(0, 0, 0, 0.4);
	padding: 10px 20px;
	color: #fff;
	z-index: 4;
}
.title {
	color: #fff;
}
.Text {
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	padding: 10px;
}
.itemBox {
	margin-bottom: 5px;
}
</style>